<template>
  <div id="word1">
        <div class="top">
            <div
            :class="active == 0 ? 'active  center-left' : 'center-left'" id="center-left"
            @click="tab1"
          >
            累计确诊
          </div>
          <div
            :class="active == 1 ? 'active   center-right' : 'center-right'" id="center-right"
            @click="tab2"
          >
            现存确诊
          </div>
        </div>
        <div id="word"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import "@/assets/world"
import dataMap from  "@/assets/dataMap"
import nameMap from  "@/assets/nameMap"
import worldMap from "@/assets/dataMap copy"
import { http } from "@/api/request";
export default {
  data() {
    return {
        active: 0
    };
  },
  methods: {
    // tab1() {
    //   this.active = 0;
    // },
    // tab2() {
    //   this.active = 1;
    // },
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
async mounted() {
    var res=await http()
    var list=[]
    let _this=this
    var chartDom = document.getElementById("word");
    var myChart = echarts.init(chartDom);
    window.onresize = function() {
      myChart.resize()
    }
     document.getElementById('center-left').addEventListener("click", function(){
        _this.active = 0
        console.log(_this.active);
    })
    document.getElementById('center-right').addEventListener("click", function(){
        _this.active = 1
        console.log(_this.active);
    })
    var option = {
    visualMap: {
        min: 0,
        max: 1000000,
        text:['High','Low'],
        realtime: false,
        calculable: true,
        color: ['orangered','yellow','lightskyblue']
    },
    series: [
        {
            name: 'World Population (2010)',
            type: 'map',
            mapType: 'world',
            roam: true,
            itemStyle:{
                emphasis:{label:{show:true}}
            },
            data:_this.active==1?dataMap:worldMap,
            nameMap:nameMap,
        }
    ]
};

    option && myChart.setOption(option);
  },
};
</script>
<style lang="scss" scoped>
#word1 {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  .top{
    width: 100%;
    .center-left,
        .center-right {
          width: 180px;
          height: 50px;
          margin-left: 10px;
          z-index: 999;
          text-align: center;
          line-height: 50px;
          border-radius: 30px;
          font-size: 23px;
          background-color: rgba(98, 182, 255, 0.23921568627450981);
          color: #fff;
        }
        .active {
          color: #ffeb7b;
        }
        .center-left,
        .center-right:hover {
          cursor: pointer;
        }
        .center-left {
          position: absolute;
          top: 40px;
          left: 90px;
        }
        .center-right {
          position: absolute;
          top: 40px;
          right: 100px;
        }
  }
  #word{
    width: 100%;
    height: 500px;
    margin-top: 150px;
  }
}
</style>
